<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="编程云">
    <meta name="description" content="编程云">
    <meta name="robots" content="all">
    <meta name="copyright" content="">
    <meta name="author" content="编程云">
    <title>实验云</title>
    <link href="http://demo.aimks.com/images/icon.png" rel="apple-touch-icon">

    <link rel=stylesheet href="lib/codemirror.css">
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link rel=stylesheet href="doc/docs.css">
    <link rel=stylesheet href="addon/display/fullscreen.css">
    <link rel=stylesheet href="theme/3024-night.css">
    <link rel=stylesheet href="theme/midnight.css">
    <link rel=stylesheet href="theme/night.css">
    <link href="addon/hint/show-hint.css" rel="stylesheet">
    <script src="lib/codemirror.js"></script>
    <script src="mode/xml/xml.js"></script>
    <script src="mode/javascript/javascript.js"></script>
    <script src="mode/css/css.js"></script>
    <script src="mode/htmlmixed/htmlmixed.js"></script>
    <script src="addon/edit/matchbrackets.js"></script>

    <script src="addon/hint/show-hint.js"></script>
    <script src="addon/selection/active-line.js"></script>
    <script src="addon/display/fullscreen.js"></script>
    <script src="addon/hint/anyword-hint.js"></script>
    <script src="addon/hint/html-hint.js"></script>
    <script src="addon/hint/javascript-hint.js"></script>
    <script src="addon/hint/css-hint.js"></script>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel=stylesheet href="css/head.css">
    <link rel="stylesheet" type="text/css" href="css/mycourse.css">
    <link href="../css/video-js.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="../js/artTemplate.js"></script>
    <script src="../js/template-native.js"></script>
    <script type="text/javascript" src="../layer/layer.js"></script>
    <script src="js/Drag.js"></script>
    <script type="text/javascript" src="../js/HOST.js"></script>
    <script src="../js/main.js"></script>
    <script register-percent="100" src="../js/video.js"></script>

    <script type="text/javascript">
        //    alert(document.documentElement.clientHeight);
        window.onload = function () {
            document.getElementById("case1").style.height = document.documentElement.clientHeight - 88 + "px";
            document.getElementById("doc").style.height = document.documentElement.clientHeight - 88 + "px";
            document.getElementById("vid").style.height = document.documentElement.clientHeight - 88 + "px";
            document.getElementById("result").style.height = document.documentElement.clientHeight - 88 + "px";
            document.getElementById("c").style.height = document.documentElement.clientHeight - 88 + "px";
        }
    </script>
    <style type="text/css">
        .col-center-block {
            float: none;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body style="padding: 0">

<div class="menu">
    <div class="container">
        <nav class="navbar" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#cloud-navbar-collapse">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-cloud"></span></a>
                </div>
                <div class="collapse navbar-collapse" id="cloud-navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active dropdown" style="text-align: center">
                            <a href="#" class="head-pic" data-toggle="dropdown" id="title"
                               style="color: #000;font-size: 20px;padding: 17px 0px;">课程标题</a>
                            <ul class="dropdown-menu" id="list">
                            </ul>
                        </li>
                        <!--<li><a href="#">相关下载</a></li>-->
                        <!--<li><a href="#">个人总览</a></li>-->
                        <!--<li><a href="#">我的课程</a></li>-->
                        <!--<div class="mobile-show">-->
                        <!--<li><a href="personalCenter.html">个人信息</a></li>-->
                        <!--<li><a href="#">退出登录</a></li>-->
                        <!--</div>-->

                        <li class="dropdown head-box">
                            <a href="#" class="head-pic" data-toggle="dropdown">
                                <img src="img/head_pic.png">
                                <span>实验云</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="../personalCenter.html">个人信息</a></li>
                                <li><a href="#">退出登录</a></li>
                            </ul>
                        </li>
                        <li class=" head-box" style="margin-top: auto;margin-right: 100px;">
                            <button type="button" class="btn btn-run" id="run" onclick="runCode()">运行</button>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>
<script id="content" type="text/html">
    <% for (var i = 0; i < value.length; i ++) { %>
    <li><a href="#" data-chapterid=<%= value[i].id %> data-resourceurl=<%= value[i].resourceUrl %> data-chaptertype=<%=
        value[i].type %> data-chaptertitle=<%=
        value[i].title %> data-chapterdes=<%= value[i].des %> onclick="chooseChapter('<%= value[i].id %> ')"> <%=value[i].title %></a></li>
    <% } %>
</script>


<!--<div class="tool">-->
<!--&lt;!&ndash;<button type="button" class="btn btn-copy" id="copycode" onclick="selectCode()">复制</button>&ndash;&gt;-->
<!--<button type="button" class="btn btn-run" id="runcode" onclick="runCode()">运行</button>-->
<!--</div>-->
<div class="dragbox">
    <div class="result lef" id="a">
        <div class="showresult show1" id="case1" name="">
            课程任务
        </div>
    </div>
    <div class="drag" style="float: left;width: 1%;height: 100%;
            cursor: e-resize;background: #bd3f13;" id="c">
    </div>
    <div id="doc" style="display: none">
        <iframe src="http://www.w3school.com.cn/i/eg_landscape.jpg" width="70%"></iframe>
    </div>
    <div id="vid" style="width: 70%; float:left;display: none">
        <video id="my-video" class="col-center-block video-js" data-setup='{"playbackRates": [1, 1.5, 2] }'></video>
    </div>

    <!--<div id="codshow">-->
    <!--<button type="button" class="btn btn-run" id="run" onclick="runCode()">运行</button>-->
    <!--<button type="button" class="btn btn-run" id="runc" onclick="run('execCplus')" style="font-weight: bold;">运行c/c++</button>-->
    <!--<button type="button" class="btn btn-run" id="runjava" onclick="run('execJava')" style="font-weight: bold;">运行java</button>-->
    <!--<button type="button" class="btn btn-run" id="runpy" onclick="run('execPy')" style="font-weight: bold;">运行python</button>-->
    <div id="code_area" class="code">
        <!--<button type="button" class="btn btn-run" id="back" onclick="back()" style="display: none">返回</button>-->
<textarea class="showcode" id="code" name="code">

    #include  <iostream>
    using namespace std;
    int main() {
    cout<<"HELLO"<
    <endl
            ;
            return 0;
            }
</textarea>
        <script type="text/javascript">

            var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
                lineNumbers: true,     // 显示行数
                indentUnit: 4,         // 缩进单位为4
                extraKeys: {"Ctrl-M": "autocomplete"},//输入s然后ctrl就可以弹出选择项

                styleActiveLine: true, // 当前行背景高亮
                matchBrackets: true,   // 括号匹配
//      mode: {name: "javascript", globalVars: true},

                mode: 'htmlmixed',     // HMTL混合模式
                lineWrapping: true,    // 自动换行
                theme: 'night',      // 使用monokai模版
            });
            //    editor.on('change', function() {
            //      editor.showHint();  //满足自动触发自动联想功能
            //    });
            //    editor.setOption("extraKeys", {
            //      // Tab键换成4个空格
            //      Tab: function(cm) {
            //        var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
            //        cm.replaceSelection(spaces);
            //      },
            //      // F11键切换全屏
            //      "F11": function(cm) {
            //        cm.setOption("fullScreen", !cm.getOption("fullScreen"));
            //      },
            //      // Esc键退出全屏
            //      "Esc": function(cm) {
            //        if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
            //      }
            //    });
            //    runCode();
        </script>
    </div>
    <!--</div>-->
    <div class="result" id="b" data-a="1">
        <div class="showresult" id="result" name="result">
            <!--<button type="button" class="btn btn-run" id="run" onclick="runCode()" style="font-weight: bold;">运行</button>-->
            运行结果
        </div>
    </div>
</div>
<script type="text/javascript">

    var language = "";
    var chapterId = "";
    var courseId = "";
    var codeId = "";
    var videoUrl = "";
    var types ="";
    $(document).ready(function () {
         chapterId=window.location.href.split('=')[1];
        //alert(JSON.parse(getCookie('loginResult')).token);
        getChapter(chapterId);
        //判断是视频任务还是code任务
        switch (types) {
            case '0':
                getCode(chapterId);
                break;
            case '1':
                var h = document.documentElement.clientHeight - 88;
                var w = document.documentElement.clientWidth * 0.7;
                console.log(w + ":" + h);
                vod(w, h);
                break;
            case '2':
                dod();
                break;
            default:
                alert("nothing to do!")
                break;
        }
    });
function getChapter(chapterId) {
    var data={
        buschapter:{
            id:chapterId
        }

    };
    request('business.busChapter.get',data,function callback(result) {
        console.log("chapterinfo:"+JSON.stringify(result));
        if(result.code == 0){
            courseId =result.value.courseId;
            videoUrl = result.value.resourceUrl;
            $('#title').html(result.value.title);
            $('#case1').html(result.value.des);
            courseDetail(result.value.courseId, 2);
             types = result.value.type;

            console.log(result.msg);
        }else{
            console.log(result.msg);
        }
    },false)

}
    function runCode() {

//    $("#a").toggle(500);
//    $("#b").toggle(500);
//    document.getElementById("run").style.display = "none";
//    document.getElementById("back").style.display = "block";
        code = editor.getValue();
        submitCode(code, language);
        historyCourse();
//    var data = "code="+encodeURIComponent(code);

    }
    function back() {
        document.getElementById("back").style.display = "none";
        document.getElementById("run").style.display = "block";
        $("#a").toggle(500);
        $("#b").toggle(500);
    }
    function selectCode() {
        var obj = getElementsClass("CodeMirror-code");
        selectText(obj[0]);
        alert(obj[0]);

    }

    function chooseChapter(chapterId) {
        window.location.href="index2.html?chapterId="+chapterId;
    }

    //  function switchView() {
    //      $("#a").toggle(500);
    //      $("#b").toggle(500);
    //  }
    //
    function cod() {
        document.getElementById("vid").style.display = "none";
        document.getElementById("doc").style.display = "none";
        document.getElementById("code_area").style.display = "none";
        document.getElementById("b").style.display = "none";
    }
    function vod(width, height) {
        var myPlayer =
                videojs("my-video", {
                    "controls": true,
                    "autoplay": false,
                    "preload": "auto",
                    "poster": "oceans.png",
                    "width": width,
                    "height": height,
                    sources: [
                        {src: HOST + videoUrl, type: 'video/mp4'}
                    ],

                });
//        myPlayer.watermark({
//            file: HOST+'/my/img/logo.png',
//            clickable: true,
//            url: "http://www.yunjuanyunshu.com",
//
//        });
        myPlayer.videoJsResolutionSwitcher();
        myPlayer.on("ended", function () {
            console.log("end", this.currentTime());
            var bcR = {
                buschapterrecord: {
                    userId: getCookie('loginResult') === "" ? "" : JSON.parse(getCookie('loginResult')).id,
                    chapterId: getCookie('chapterid')
                }
            };
            request('business.busChapterRecord.finishBusCha', bcR, function callback(result) {

            });
        });
        document.getElementById("vid").style.display = "block";
        document.getElementById("doc").style.display = "none";
        document.getElementById("code_area").style.display = "none";
        document.getElementById("b").style.display = "none";
        document.getElementById("c").style.display = "none";
    }
    function dod() {
        document.getElementById("doc").style.display = "block";
        document.getElementById("vid").style.display = "none";
        document.getElementById("code_area").style.display = "none";
        document.getElementById("b").style.display = "none";
        document.getElementById("c").style.display = "none";

    }
</script>
</body>

</html>